/* radio
*/
.el-radio {
  --radio-size-large: 48px;
  --radio-size-medium: 36px;
  --radio-size-small: 24px;
  --radio-input-size-large: 28px;
  --radio-input-size-medium: 24px;
  --radio-input-size-small: 20px;
  --el-radio-text-color: var(--text-content-darkest);
  --el-radio-input-bg-color: var(--white);
  --el-radio-input-border-color: var(--surface-neutral-tertiary-rest);
  --el-radio-input-border-color-hover: var(--surface-neutral-tertiary-rest);
  --radio-checked-color: var(--text-cta-rest);
  height: var(--radio-size-medium);
  .el-radio__label {
    @apply text-body-2;
  }
  .el-radio__input {
    .el-radio__inner {
      width: var(--radio-input-size-medium);
      height: var(--radio-input-size-medium);
      border-width: 3px;
      &:after {
        z-index: 1;
        width: calc(var(--radio-input-size-medium) - 12px);
        height: calc(var(--radio-input-size-medium) - 12px);
        background-color: var(--radio-checked-color);
      }
    }
    .el-radio__original:focus-visible + .el-radio__inner {
      outline: 2px solid var(--stroke-border-cta-focused);
    }
    &.is-checked {
      .el-radio__inner {
        border-color: var(--radio-checked-color);
        background: transparent;
      }
      & + .el-radio__label {
        color: var(--text-content-darkest);
      }
    }
    &.is-disabled {
      .el-radio__inner {
        border-color: var(--text-cta-disabled);
        background: transparent;
      }
      &.is-checked {
        .el-radio__inner {
          &:after {
            background-color: var(--text-cta-disabled);
          }
        }
      }
      & + span.el-radio__label {
        color: var(--text-content-soft);
      }
    }
    &:not(.is-disabled) {
      .el-radio__inner:hover {
        background-color: var(--surface-neutral-primary-hover);
        outline: 3px solid var(--surface-neutral-primary-hover);
      }
    }
  }
  &.el-radio--large {
    height: var(--radio-size-large);
    .el-radio__label {
      @apply text-body-1;
    }
    .el-radio__inner {
      width: var(--radio-input-size-large);
      height: var(--radio-input-size-large);
      border-width: 4px;
      &:after {
        width: calc(var(--radio-input-size-large) - 14px);
        height: calc(var(--radio-input-size-large) - 14px);
        background-color: var(--radio-checked-color);
      }
    }
    &:not(.is-disabled) {
      .el-radio__inner:hover {
        outline: 4px solid var(--surface-neutral-primary-hover);
      }
    }
  }
  &.el-radio--small {
    height: var(--radio-size-small);
    .el-radio__label {
      @apply text-body-2;
    }
    .el-radio__inner {
      width: var(--radio-input-size-small);
      height: var(--radio-input-size-small);
      border-width: 2px;
      &:after {
        width: calc(var(--radio-input-size-small) - 10px);
        height: calc(var(--radio-input-size-small) - 10px);
        background-color: var(--radio-checked-color);
      }
    }
    &:not(.is-disabled) {
      .el-radio__inner:hover {
        outline: 2px solid var(--surface-neutral-primary-hover);
      }
    }
  }
}

.segmented-control {
  @apply rounded-lg p-1;
  background-color: var(--surface-neutral-secondary-rest);
  .el-radio-button {
    .el-radio-button__original-radio {
      &:checked + .el-radio-button__inner {
        background-color: var(--surface-neutral-primary-rest);
        box-shadow: none;
        color: var(--text-cta-rest);
      }
    }
    .el-radio-button__inner {
      @apply inline-flex items-center gap-1 bg-transparent border-0 rounded p-2 text-label-2;
      color: var(--text-content-soft);
      .el-icon {
        font-size: 16px;
        &:not(:last-child) {
          @apply mr-1;
        }
      }
    }
  }
}
